<template>
  <div class="searchres-body">
    <!-- 顶部搜索框 -->
    <form action="/">
      <van-search
        shape="round"
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        @keyup.enter="onSearch"
      />
    </form>
    <!-- tab -->
    <van-tabs v-model="activeName" color="#1faf88">
      <van-tab title="全部" name="all" title-inactive-color="#1faf88">
        <!-- 内容 -->
        <div class="m-card">
          <p class="search-result-title">专栏</p>
          <!-- {{ books }} -->
          <!-- <search-goods v-for="(item, index) in bookres" :key="index" /> -->
          <div style="border-radius: 0px; padding: 0px 16px 8px; margin: 4px 0">
            <book-list
              v-for="(item, index) in books.data"
              :key="index"
              :books="item"
            />
          </div>
        </div>
      </van-tab>
      <van-tab title="书籍" name="book">
        <div v-if="true" style="padding-top: 50px">
          <div class="empty-box">
            <img src="/order_img/search-empty.png" width="100%" alt="" />
            <p>抱歉，没有找到你要的结果</p>
          </div>
        </div>
      </van-tab>
      <van-tab title="课程" name="course"></van-tab>
      <van-tab title="专栏" name="column"></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Toast } from 'vant'
import SearchGoods from '../components/SearchGoods.vue'
import BookList from '../components/BookList.vue'
export default {
  components: { SearchGoods, BookList },
  data() {
    return {
      books: '',
      value: '',
      activeName: 'all',
    }
  },
  methods: {
    onSearch(val) {
      // Toast(val)
      let url = 'search?field=' + val
      console.log(url)
      this.axios(url).then(res => {
        console.log(res)
        this.books = res.data
      })
    },
    onCancel() {
      // Toast('取消')
      this.$router.push('/')
    },
  },
}
</script>

<style lang="scss" scoped>
.searchres-body {
  background-color: #f7f7f7;
  height: 100vh;
}
.m-card {
  background-color: white;
  margin-top: 8px !important;
}
.search-result-title {
  font-size: 12px;
  color: #999;
  line-height: 36px;
  border-bottom: 1px solid #ebebeb;
  padding-left: 5%;
}
.empty-box {
  text-align: center;
  font-size: 16px;
  color: #ccc;
  line-height: 26px;
}
</style>
